/**
 * OKR 节点组件
 * 展示单个 OKR 节点的信息和进度
 */

import React from "react";
import { Card, Progress, Avatar, Tag, Tooltip, Button } from "antd";
import {
  TeamOutlined,
  UserOutlined,
  BankOutlined,
  AimOutlined,
  ClockCircleOutlined,
  CaretDownOutlined,
  CaretRightOutlined
} from "@ant-design/icons";
import type { OKRNode } from "../../../types/okr";
import { OKRNodeType, OKRStatus } from "../../../types/okr";

interface OKRNodeComponentProps {
  /** OKR 节点数据 */
  node: OKRNode;
  /** 是否处于悬浮状态 */
  isHovered?: boolean;
  /** 是否折叠 */
  isCollapsed?: boolean;
  /** 折叠切换回调 */
  onToggleCollapse?: (nodeId: string) => void;
}

/**
 * 获取节点类型对应的图标
 * @param type 节点类型
 * @returns React 图标组件
 */
const getNodeTypeIcon = (type: OKRNodeType) => {
  switch (type) {
    case OKRNodeType.DEPARTMENT:
      return <BankOutlined />;
    case OKRNodeType.TEAM:
      return <TeamOutlined />;
    case OKRNodeType.INDIVIDUAL:
      return <UserOutlined />;
    default:
      return <AimOutlined />;
  }
};

/**
 * 获取节点类型对应的颜色
 * @param type 节点类型
 * @returns 颜色值
 */
const getNodeTypeColor = (type: OKRNodeType) => {
  switch (type) {
    case OKRNodeType.DEPARTMENT:
      return "#722ed1"; // 紫色
    case OKRNodeType.TEAM:
      return "#1890ff"; // 蓝色
    case OKRNodeType.INDIVIDUAL:
      return "#52c41a"; // 绿色
    default:
      return "#8c8c8c";
  }
};

/**
 * 获取节点类型的显示名称
 * @param type 节点类型
 * @returns 显示名称
 */
const getNodeTypeName = (type: OKRNodeType) => {
  switch (type) {
    case OKRNodeType.DEPARTMENT:
      return "部门目标";
    case OKRNodeType.TEAM:
      return "团队目标";
    case OKRNodeType.INDIVIDUAL:
      return "个人目标";
    default:
      return "目标";
  }
};

/**
 * 获取状态对应的颜色
 * @param status 状态
 * @returns 颜色值
 */
const getStatusColor = (status: OKRStatus) => {
  switch (status) {
    case OKRStatus.NOT_STARTED:
      return "#d9d9d9";
    case OKRStatus.IN_PROGRESS:
      return "#1890ff";
    case OKRStatus.COMPLETED:
      return "#52c41a";
    case OKRStatus.OVERDUE:
      return "#ff4d4f";
    default:
      return "#d9d9d9";
  }
};

/**
 * 获取状态显示名称
 * @param status 状态
 * @returns 显示名称
 */
const getStatusName = (status: OKRStatus) => {
  switch (status) {
    case OKRStatus.NOT_STARTED:
      return "未开始";
    case OKRStatus.IN_PROGRESS:
      return "进行中";
    case OKRStatus.COMPLETED:
      return "已完成";
    case OKRStatus.OVERDUE:
      return "已逾期";
    default:
      return "未知";
  }
};

/**
 * OKR 节点组件
 */
const OKRNodeComponent: React.FC<OKRNodeComponentProps> = ({
  node,
  isHovered = false,
  isCollapsed = false,
  onToggleCollapse
}) => {
  const typeColor = getNodeTypeColor(node.type);
  const statusColor = getStatusColor(node.status);

  /**
   * 处理折叠按钮点击
   */
  const handleCollapseClick = (e: React.MouseEvent) => {
    e.stopPropagation(); // 阻止事件冒泡
    onToggleCollapse?.(node.id);
  };

  return (
    <Card
      size="small"
      className={`okr-node-card cursor-pointer transition-all duration-200 ${
        isHovered ? "shadow-xl scale-105 z-50" : "hover:shadow-lg"
      }`}
      style={{
        borderColor: typeColor,
        borderWidth: isHovered ? 3 : 2,
        height: "100%",
        transform: isHovered ? "scale(1.05)" : "scale(1)",
        zIndex: isHovered ? 50 : "auto",
        boxShadow: isHovered ? "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)" : undefined
      }}
      bodyStyle={{
        padding: "12px",
        height: "100%",
        display: "flex",
        flexDirection: "column"
      }}
    >
      {/* 节点头部 */}
      <div className="flex items-center justify-between mb-2">
        <div className="flex items-center space-x-2">
          {/* 折叠/展开按钮 */}
          {node.children.length > 0 && onToggleCollapse && (
            <Button
              type="text"
              size="small"
              icon={isCollapsed ? <CaretRightOutlined /> : <CaretDownOutlined />}
              onClick={handleCollapseClick}
              className="p-0 w-4 h-4 flex items-center justify-center"
              style={{ minWidth: "16px", fontSize: "10px" }}
            />
          )}
          <span style={{ color: typeColor, fontSize: "16px" }}>{getNodeTypeIcon(node.type)}</span>
          <Tag color={typeColor}>{getNodeTypeName(node.type)}</Tag>
        </div>

        <Tag color={statusColor}>{getStatusName(node.status)}</Tag>
      </div>

      {/* 目标标题 */}
      <Tooltip title={node.description} placement="top">
        <h4
          className="text-sm font-semibold text-gray-800 mb-2 line-clamp-2 leading-5"
          style={{
            height: "40px",
            overflow: "hidden",
            display: "-webkit-box",
            WebkitLineClamp: 2,
            WebkitBoxOrient: "vertical"
          }}
        >
          {node.title}
        </h4>
      </Tooltip>

      {/* 进度条 */}
      <div className="mb-3">
        <div className="flex items-center justify-between mb-1">
          <span className="text-xs text-gray-500">完成进度</span>
          <span className="text-xs font-medium text-gray-700">{node.progress}%</span>
        </div>
        <Progress
          percent={node.progress}
          size="small"
          strokeColor={node.progress >= 100 ? "#52c41a" : "#1890ff"}
          showInfo={false}
        />
      </div>
    </Card>
  );
};

export default OKRNodeComponent;
